import React from 'react';
import { Spin, Carousel } from 'antd';
import { isEqual, isEmpty } from 'lodash';
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import {WeaTools, WeaErrorPage, WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
import EHeader from '../common/EHeader';
import FooterMore from "../common/FooterMore";
import { NoRightCom, openLinkUrl } from '../../util/common';
//元素组件
class Stock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            edata: null,
            refresh: false,
        }
        this.handleEData = this.handleEData.bind(this);
        this.handleRefresh = this.handleRefresh.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }
    handleDelete(){
        this.setState({
            edata: null,
        });
        ls.set('edata-'+this.props.config.params.eid, null);
    }
    handleRefresh(){
        this.setState({
            refresh: true,
        });
        this.handleEData(this.props.config.params);
    }
    handleEData(params){
        const { eid, api } = params;
        WeaTools.callApi(api || '/api/portal/element/stock', 'POST', {...params}).then(result=> {
            ls.set('edata-'+eid, result);
            this.setState({
                edata: result,
                refresh: false,
            });
       });
    }
    componentDidMount(){
        const { config = {} } = this.props;
        const { params = {} } = config;
        const { eid } = params;
        const edata = ls.getJSONObj(`edata-${eid}`);
        if (config.islsdata && edata) {
            this.setState({ edata });
        } else {
            this.handleEData(params);
        }
    }
    componentWillReceiveProps(nextProps){
        const { item, params, isHasRight } = this.props.config;
        const config = { item, params, isHasRight };
        const _config = { 
            item: nextProps.config.item, 
            params: nextProps.config.params, 
            isHasRight: nextProps.config.isHasRight,
        };
        if(!isEqual(config, _config) || nextProps.config.isRender){
            this.handleEData(nextProps.config.params);
        }
    }
    shouldComponentUpdate(nextProps, nextState){
        const { item, params, isHasRight } = this.props.config;
        const config = { item, params, isHasRight };
        const _config = { 
            item: nextProps.config.item, 
            params: nextProps.config.params, 
            isHasRight: nextProps.config.isHasRight,
        };
        return !isEqual(this.state, nextState) || !isEqual(config, _config)
    }
    render() {
        const { edata, refresh } = this.state;
        const { config, fontSizeMp } = this.props;
        if(!config || !edata) return <div/>;
        const { isHasRight, item } = config;
        const { eid, ebaseid, content, header, contentview, style } = item;
        const { style: style1= {} } = contentview;
        let EContentHtml = <div/>;
        let rollingDirection = '2';
        if(isHasRight){
            if(!isEmpty(edata)){
                const { esetting } = edata;
                const { linkmode, width, height,eAutoSwitch, eSpeedSwitch } = esetting;
                const tdata = edata.data;
                // const carouselSettings = {
                //     slidesToShow: 1,
                //     slidesToScroll: 1,
                //     autoplay: eAutoSwitch=='1',
                //     autoplaySpeed: eSpeedSwitch,
                // };
                const settings = {
                    infinite: true,
                    autoplaySpeed: parseInt(eSpeedSwitch),
                    className: "element-stock",
                    dots: true,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    autoplay: eAutoSwitch == '1',
                    vertical: rollingDirection == '1',
                    pauseOnHover: true,
                    draggable: false,
                    appendDots: dots => (
                        <div
                            style={{

                            }}
                        >
                            <ul style={{ margin: "0px" }}> {dots} </ul>
                        </div>
                    ),
            //         customPaging: i => (
            //             <div
            //                 style={{
            //                     width: "30px",
            //                 }}
            //             >
            //                 {1}
            // </div>
            //         )
                };

                EContentHtml = <div style={{textAlign:'center'}} >
                    {
                        tdata.length == 1 ? <div>
                            <a href="javascript:void(0);" onClick={openLinkUrl.bind(this,tdata[0].linkUrl,linkmode)}>
                                <img style={{ width: width+'px', height: height+'px', margin: '0 auto'}} src={tdata[0].imgUrl} border='0'/>
                            </a>
                        </div>
                        :<Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@32nw8h`} {...settings}>
                            {tdata.map(item =>{
                                    return <div>
                                        <a href="javascript:void(0);" onClick={openLinkUrl.bind(this,item.linkUrl,linkmode)}>
                                            <img style={{ width: width+'px', height: height+'px', margin: '0 auto'}} src={item.imgUrl} border='0'/>
                                        </a>
                                        </div>
                                }
                            )}
                            </Slider>

                    }

                </div>;
            }
        }else{
            EContentHtml = <NoRightCom ecId={`${this && this.props && this.props.ecId || ''}_NoRightCom@nty3ar`}/>
        }
        return <div className="item"
                    style={style}
                    id={`item_${eid}`} 
                    data-eid={eid} data-ebaseid={ebaseid} 
                    data-needRefresh={item.needRefresh} 
                    data-cornerTop={item.cornerTop} 
                    data-cornerTopRadian={item.cornerTopRadian}
                    data-cornerBottom={item.cornerBottom} 
                    data-cornerBottomRadian={item.cornerBottomRadian}>
                    <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@e6ch5g`} config={config} handleRefresh={this.handleRefresh} handleDelete={this.handleDelete} fontSizeMp={fontSizeMp}/>
                    <div className="setting" id={`setting_${eid}`}></div>
                    <div className="content" id={`content_${eid}`} style={{width:'auto',_width:'100%'}}>
                        <div className="content_view" id={`content_view_id_${eid}`} style={{height: style1.height}}>
                            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@3jc409`} spinning={refresh}>{EContentHtml}</Spin>
                        </div>
                        <div style = {{textAlign:'right'}} id={`footer_${eid}`}><FooterMore ecId={`${this && this.props && this.props.ecId || ''}_FooterMore@6p2m9w`} config={this.props.config}/></div>
                    </div>
            </div>;
    }
}

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
            return ( <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@rjjqwv`} msg = { hasErrorMsg ? this.props.error :getLabel(385218,"对不起，该页面异常，请联系管理员！") }/>
        );
    }
}
Stock = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(Stock);
export default Stock;